<template>
  <Popup
    v-model="show"
    class="popupAction flex flex-col justify-center items-center"
  >
    <h1 class="title">{{ actionP.title }}</h1>
    <div class="content my-32px">
      {{ actionP.content }}
    </div>
    <div class="bottomOP" v-if="actionP.showButtons === 'back'">
      <VanButton type="default" class="back" @click.stop="back">{{
        actionP.backText
      }}</VanButton>
    </div>
    <div class="bottomOP" v-else>
      <VanButton type="default" class="cancel bt" @click.stop="close">{{
        actionP.cancelText
      }}</VanButton>
      <VanButton type="info" class="confirm bt" @click.stop="confirm">{{
        actionP.confirmText
      }}</VanButton>
    </div>
  </Popup>
</template>

<script>
import { Popup, Button as VanButton } from "vant";
export default {
  components: {
    Popup,
    VanButton,
  },
  data() {
    return {
      show: false,
      actionP: {
        title: "提示",
        content: "",
        confirmText: "确认",
        showButtons: "operate",
        backText: "取消",
        cancelText: "取消",
      },
    };
  },
  methods: {
    open(val) {
      Object.keys(val).forEach((key) => {
        if (val[key] !== "" || val[key] !== null || val[key] !== undefined) {
          this.actionP[key] = val[key];
        }
      });
      this.show = true;
    },
    close() {
      this.show = false;
    },
    // 点击返回
    back() {
      this.close();
      this.$emit("back");
    },
    // 点击确认
    confirm() {
      this.close();
      this.$emit("confirm");
    },
  },
};
</script>

<style lang="scss" scoped>
.popupAction {
  font-family: PingFangSC-Medium, PingFang SC;
  background: #ffffff;
  border-radius: 10px;
  padding: 18px 20px 16px;
  width: 312px;
  .title {
    font-size: 16px;
    font-weight: 500;
    color: #333333;
  }
  .content {
    font-size: 14px;
    font-weight: 500;
    color: #666666;
    line-height: 20px;
  }

  .bottomOP {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .van-button {
      border-radius: 6px;
      border: 0 !important;
    }
    .bt {
      width: 132px;
      height: 44px;
      border-radius: 6px;
    }
    .cancel {
      background: #f5f5f5;
    }
    .back {
      width: 272px;
      height: 44px;
      background: #1d6fe9;
      border-radius: 10px;
      color: #ffffff;
    }
  }
}
</style>
